<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form id="form" ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <div v-if="form.type == 'paypal'">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <p style="font-size: 30px;color: #ff0000;border-bottom: 1px solid #585858;padding-bottom: 5px;">客户问题：{{ form.reason }}</p>
                <el-form-item label="争议状态:">
                    <p>{{ form.status_alias }}</p>
                </el-form-item>
                <el-form-item label="所属店铺:">
                    <p>{{ form.site_name }}</p>
                </el-form-item>
                <el-form-item label="所属订单:">
                    <p>{{ form.order_name }}</p>
                </el-form-item>
                <!-- <el-form-item label="争议平台:">
                    <p>{{ form.type }}</p>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm">发放全额退款</el-button>
                    <!-- <el-button type="warning" @click="cancel">取消 </el-button> -->
                </el-form-item>
                <p style="font-size: 24px;border-bottom: 1px solid #585858;
    padding-bottom: 5px;">事件详情</p>
                <el-form-item label="争议金额:">
                    <p>{{ form.amount }}</p>
                </el-form-item>
                <el-form-item label="币种:">
                    <p>{{ form.currency }}</p>
                </el-form-item>
                <el-form-item label="买家姓名:">
                    <p>{{ form.customer_name }}</p>
                </el-form-item>
                <el-form-item label="买家邮箱:">
                    <p>{{ form.customer_email_address }}</p>
                </el-form-item>
                <el-form-item label="买家地址:">
                    <p>{{ form.address }}</p>
                </el-form-item>
                <el-form-item label="报告日期:">
                    <p>{{ form.createtime }}</p>
                </el-form-item>
                <el-form-item label="账单号:">
                    <p>{{ form.invoice_number }}</p>
                </el-form-item>
                <el-form-item label="交易号:">
                    <p>{{ form.seller_transaction_id }}</p>
                </el-form-item>
                <el-form-item label="争议ID:">
                    <p>{{ form.dispute_id }}</p>
                </el-form-item>
                <el-form-item label="授权密钥:">
                    <p>{{ form.payment_intent }}</p>
                </el-form-item>
                <p style="font-size: 24px;border-bottom: 1px solid #585858;
    padding-bottom: 5px;">物品详情</p>
                <el-form-item label="物品名称:">
                    <p>{{ form.item_name }}</p>
                </el-form-item>
                <el-form-item label="物品描述:">
                    <p>{{ form.item_description }}</p>
                </el-form-item>
                <el-form-item label="数量:">
                    <p>{{ form.item_quantity }}</p>
                </el-form-item>
                <el-form-item label="问题:">
                    <p>{{ form.reason }}</p>
                </el-form-item>
            </div>

            <div v-if="form.type == 'stripe'">、
                <p style="font-size: 30px;color: #ff0000;border-bottom: 1px solid #585858;padding-bottom: 5px;">客户问题：{{ form.reason }}</p>
                    <el-form-item label="争议状态:">
                        <p>{{ form.status_alias }}</p>
                    </el-form-item>
                    <el-form-item label="所属店铺:">
                        <p>{{ form.site_name }}</p>
                    </el-form-item>
                    <el-form-item label="所属订单:">
                        <p>{{ form.order_name }}</p>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="" @click="cancel">接受争议</el-button>
                        <el-button type="primary" @click="cancel">反驳争议</el-button>
                    </el-form-item>
                    <p style="font-size: 24px;border-bottom: 1px solid #585858;
    padding-bottom: 5px;">付款详情</p>
                    <el-form-item label="金额:">
                        <p>{{ form.amount }}</p>
                    </el-form-item>
                    <el-form-item label="币种:">
                        <p>{{ form.currency }}</p>
                    </el-form-item>
                    <el-form-item label="日期:">
                        <p>{{ form.createtime }}</p>
                    </el-form-item>
                    <p style="font-size: 24px;border-bottom: 1px solid #585858;
    padding-bottom: 5px;">支付方式</p>
                    <el-form-item label="买家姓名:">
                    <p>{{ form.customer_name }}</p>
                    </el-form-item>
                    <el-form-item label="买家邮箱:">
                        <p>{{ form.customer_email_address }}</p>
                    </el-form-item>
                    <el-form-item label="地址:">
                        <p>{{ form.billing_address }}</p>
                    </el-form-item>
                    <p style="font-size: 24px;border-bottom: 1px solid #585858;
    padding-bottom: 5px;">配送</p>
                    <el-form-item label="收款人:">
                        <p>{{ form.customer_name }}</p>
                    </el-form-item>
                    <el-form-item label="配送地址:">
                        <p>{{ form.shipping_address }}</p>
                    </el-form-item>
                    <p style="font-size: 24px;border-bottom: 1px solid #585858;
    padding-bottom: 5px;">元数据</p>
                    <el-form-item label="争议ID:">
                        <p>{{ form.dispute_id }}</p>
                    </el-form-item>
                    <el-form-item label="授权密钥:">
                        <p>{{ form.payment_intent }}</p>
                    </el-form-item>
            </div>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {},
            form: {},
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
    },
}
</script>
<style>
#form p {
    margin: 0;padding: 0;
}
</style>
